<template>
    <div class="detail-wrapper">
        <div class="title-wrapper">
            <el-page-header @back="goBack"
                            :content="title"> </el-page-header>
        </div>
        <div class="check">
            <div class="content-box"
                 v-if="tableData.length">
                <div class="top-wrapper">
                    <div class="left-faceimg">
                        <img :src="faceImg(tableData[0].thumbnailId)"
                             alt="">
                    </div>
                    <div class="right-title">
                        <p class="name">{{tableData[0].title}}</p>
                        <div class="desc">
                            <span class="desc-item">作者:{{tableData[0].author}}</span>
                            <span class="desc-item">发布时间:{{formatDate(tableData[0].pubdate)}}</span>
                            <span class="desc-item">医生专家:{{tableData[0].doctorSpecialist}}</span>
                        </div>
                    </div>
                </div>
                <div class="desc-wrapper">
                    <span class="desc-name">
                        简介
                    </span>
                    <p class="desc-content">
                        {{tableData[0].synopsis}}
                    </p>
                </div>
                <el-table v-if="tableData.length"
                          :data="tableData"
                          style="width: 100%">
                    <el-table-column prop="pubdate"
                                     align="center"
                                     label="发布时间"
                                     width="180">
                        <template slot-scope="scope">
                            {{formatDate(scope.row.pubdate)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="area"
                                     align="center"
                                     label="区域" />
                    <el-table-column prop="videoSize"
                                     align="center"
                                     label="视频大小">
                        <template slot-scope="scope">
                            {{(scope.row.videoSize/1024/1024).toFixed(2)}}M
                        </template>
                    </el-table-column>
                    <el-table-column prop="videoTime"
                                     align="center"
                                     label="时长">
                        <template slot-scope="scope">
                            {{(scope.row.videoTime/60).toFixed(2)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="videoState"
                                     align="center"
                                     label="状态" />
                    <el-table-column prop="hospital"
                                     align="center"
                                     label="医院" />
                    <el-table-column prop="address"
                                     align="center"
                                     label="使用情况" />
                    <el-table-column fixed="right"
                                     label="操作"
                                     width="100">
                        <template>
                            <el-button @click="handleClick"
                                       type="text"
                                       size="small"
                                       v-show="!showVideo">查看</el-button>
                            <el-button @click="showVideo=false"
                                       type="text"
                                       size="small"
                                       v-show="showVideo">关闭</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="video-wrapper"
                 v-if='showVideo'>
                <video :src="tableData[0].videoSourceUrl"
                       controls
                       v-if="tableData[0].videoSourceUrl"></video>
                <!-- <p class="desc"
                   v-else>
                    视频暂未解码成功，请稍后
                </p> -->
            </div>
            <div class="btn-wrapper">
                <el-popover placement="top"
                            width="160"
                            v-model="visible">
                    <p>确定通过审核?</p>
                    <div style="text-align: right; margin: 0">
                        <el-button size="mini"
                                   type="text"
                                   @click="visible = false">取消</el-button>
                        <el-button type="primary"
                                   size="mini"
                                   @click="handleExamine(true)">确定</el-button>
                    </div>
                    <el-button type="warning"
                               icon="el-icon-check"
                               trigger="click"
                               slot="reference"
                               v-hasPermi="['operater:video:examine']">通过审核</el-button>
                </el-popover>
                <el-popover placement="top"
                            width="300"
                            v-model="unCheckVisible">
                    <el-form ref="form"
                             :model="sizeForm"
                             label-width="80px"
                             size="mini">
                        <el-form-item label="审核意见">
                            <el-input v-model="sizeForm.remarks"
                                      required></el-input>
                        </el-form-item>
                    </el-form>
                    <div style="text-align: right; margin: 0">
                        <el-button size="mini"
                                   type="text"
                                   @click="unCheckVisible = false">取消</el-button>
                        <el-button type="primary"
                                   size="mini"
                                   @click="handleExamine(false)">确定</el-button>
                    </div>
                    <el-button type="danger"
                               icon="el-icon-close"
                               trigger="click"
                               slot="reference"
                               v-hasPermi="['operater:video:examine']">不通过审核</el-button>
                </el-popover>
            </div>
        </div>
    </div>
</template>
<script>
import { getVideo, getVideoDetail, updateState } from '@/api/operater/video'
import { baseUrl } from '@/api/config'
import { formatDate } from '@/utils/index'
export default {
    props: [],
    data() {
        return {
            imageUrl: '',
            unCheckVisible: false,
            visible: false,
            sizeForm: {
                remarks: '',
            },
            showVideo: false,
            tableData: [],
            title: '视频详情查看',
            id: '',
        }
    },
    computed: {},
    watch: {},
    created() {
        this.id = this.$route.query.videoId
        this._getVideo(this.id)
    },
    mounted() {},
    methods: {
        handleClick() {
            if (!this.tableData[0].videoSourceUrl) {
                this.$message.warning('视频暂未解码成功，请稍后')
            } else {
                this.showVideo = true
            }
        },
        formatDate,
        faceImg(id) {
            return baseUrl(id)
        },
        /** 通过按钮操作 */
        handleExamine(examine) {
            const id = this.id
            let params = {
                id,
                newsRemarks: this.sizeForm.remarks,
                yesOrNo: examine,
            }
            updateState(params)
                .then((res) => {
                    // console.log(res);
                    this.$message(res.msg)
                    if (res.code === 200) {
                        this.$message.success(res.msg)
                        this.visible = false
                        this.unCheckVisible = false
                        this.$router.go(-1)
                    } else {
                        this.$message.success(res.msg)
                        this.unCheckVisible = false
                        this.visible = false
                        this.$router.go(-1)
                    }
                })
                .catch((e) => {
                    console.log(e)
                })
        },
        goBack() {
            this.$router.go(-1)
        },
        _getVideoDetail(id) {
            getVideoDetail(id)
                .then((res) => {
                    if (res.code === 200) {
                        return res.data
                    }
                })
                .catch((e) => {
                    console.log(e)
                })
        },
        _getVideo(id) {
            let _this = this
            getVideoDetail(id).then((res) => {
                if (res.code === 200) {
                    let temp = {
                        ...res.data.data[0],
                        ...res.data.data[1],
                    }
                    _this.tableData.push(temp)
                    // let data = _this._getVideoDetail(id)
                } else {
                    _this.$message.error(res.msg)
                }
            })
        },
    },
}
</script>
<style lang="scss">
.detail-wrapper {
    padding-bottom: 60px;
    .title-wrapper {
        padding: 24px;
    }
    .btn-wrapper,
    .title {
        text-align: center;
        margin-top: 30px;
        .el-button--medium {
            margin-right: 35px;
        }
    }
    .check {
        background-color: #f5f5f5;
        padding: 40px;

        .video-wrapper {
            width: 100%;
            video {
                max-width: 100%;
            }
        }
        .content-box {
            padding: 40px;
            background: #fff;
            .desc-wrapper {
                display: flex;
                padding: 20px 0;
                align-items: flex-start;
                line-height: 20px;
                .desc-name {
                    flex: 0 0 100px;
                    text-align: left;
                    font-size: 14px;
                    color: #888;
                }
                .desc-content {
                    font-size: 14px;
                    margin: 0;
                    padding: 0;
                    line-height: 20px;
                }
            }
            .top-wrapper {
                display: flex;
                padding-bottom: 40px;
                border-bottom: 1px solid #eee;
                .right-title {
                    .name {
                        font-weight: 900;
                    }
                    .desc {
                        &-item {
                            font-size: 14px;
                            color: #888;
                            &:not(:first-child) {
                                margin-left: 40px;
                            }
                        }
                    }
                }
                .left-faceimg {
                    width: 240px;
                    height: 114px;
                    margin-right: 50px;
                    overflow: hidden;
                    img {
                        width: 100%;
                    }
                }
            }
        }
    }
}
</style>
